<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>帖子详情页</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/assets/css/common/global.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <!-- 复用提示框信息 -->
    <div th:replace="point-modal::modal"></div>
    <!-- 帖子详情及回复内容展示 -->
    <div class="main">
        <!-- 帖子详情 -->
        <div class="container">
            <!-- 标题 -->
            <h6 class="mb-4">
                <img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
                <span th:utext="${discussPost.title}">标题</span>
                <div class="float-right" th:if="${loginUserData != null && loginUserData.role == 'manager'}">
                    <button type="button" class="btn btn-danger btn-sm" id="topBtn" th:onclick="|topDiscussPost(${discussPost.id})|">
                        <span th:text="${discussPost.postType == 1?'取消置顶':'置顶'}">置顶</span>
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" id="creamBtn" th:onclick="|creamDiscussPost(${discussPost.id})|">
                        <span th:if="${discussPost.postStatus == 1}">取消加精</span>
                        <span th:if="${discussPost.postStatus == 0}">加精</span>
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" th:onclick="|deleteDiscussPost(${discussPost.id})|">删除</button>
                </div>
            </h6>
            <!-- 作者 -->
            <div class="media pb-3 border-bottom">
                <a th:href="@{|/user/profile/${discussPost.user.id}|}">
                    <img th:src="@{|/assets/img/user/${discussPost.user.userHead==null || discussPost.user.userHead==''?'default-avatar.jpg':discussPost.user.userHead}|}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
                </a>
                <div class="media-body">
                    <div class="mt-0 text-warning" th:utext="${discussPost.user.username}">寒江雪</div>
                    <!--注意时间需要转换格式-->
                    <div class="text-muted mt-3">
                        发布于 <b th:text="${#dates.format(discussPost.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
                        <ul class="d-inline float-right">
                            <li class="d-inline ml-2">
                                <a href="javascript:;" th:onclick="|like(this,${discussPost.id}, 1)|" class="text-primary">
                                    <b th:text="${discussPost.likeStatus == 1 ? '已赞' : '赞'}"></b> <i th:text="${discussPost.likeCount}"></i>
                                </a>
                            </li>
                            <li class="d-inline ml-2">|</li>
                            <li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 <span th:text="${discussPost.commentCount}">7</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mt-4 mb-3 content" th:utext="${discussPost.content}">帖子内容</div>
        </div>
        <!-- 回帖 -->
        <div class="container mt-3">
            <!-- 回帖数量 -->
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> <i th:text="${discussPost.commentCount}">30</i>条回帖</h6>
                </div>
                <div class="col-4 text-right">
                    <a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
                </div>
            </div>
            <!-- 回帖列表 -->
            <ul class="list-unstyled mt-4">
                <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="comment:${discussPost.comments}">
                    <a th:href="@{|/user/profile/${comment.user.id}|}">
                        <img th:src="@{|/assets/img/user/${comment.user.userHead==null || comment.user.userHead==''?'default-avatar.jpg':comment.user.userHead}|}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
                    </a>
                    <div class="media-body">
                        <div class="mt-0">
                            <!--用户名-->
                            <span class="font-size-12 text-success" th:utext="${comment.user.username}">用户名</span>
                            <!--楼层-->
                            <!--注意：在分页的情况下，遍历comments的次数在每一页都是1-5，所以需要加上当前页中的起始行才是楼层数-->
                            <!--thymeleaf提供了一个隐含的状态对象，它的固定形式为：循环变量名+Stat 。我们可以通过它获取循环次数-->
                            <span class="badge badge-secondary float-right floor">
									<i th:text="${page.offset + commentStat.count}">1</i>楼
								</span>
                        </div>
                        <div class="mt-2" th:utext="${comment.content}">
                            评论内容
                        </div>
                        <div class="mt-4 text-muted font-size-12">
                            <span>发布于 <b th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b></span>
                            <ul class="d-inline float-right">
                                <!-- 点赞 -->
                                <li class="d-inline ml-2">
                                    <a href="javascript:;" th:onclick="|like(this,${comment.id}, 2)|" class="text-primary">
                                        <b th:text="${comment.likeStatus == 1 ? '已赞' : '赞'}">赞</b>(<i th:text="${comment.likeCount}">1</i>)
                                    </a>
                                </li>
                                <li class="d-inline ml-2">|</li>
                                <!--在controller里已经获取到回复的数量，放在了Map中-->
                                <li class="d-inline ml-2"><a href="#" class="text-primary">回复(<i th:text="${comment.replyComments.size()}">2</i>)</a></li>
                            </ul>
                        </div>
                        <!-- 回复列表 -->
                        <ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">
                            <!-- 同理循环遍历回复，得到评论下的所有回复信息 -->
                            <li class="pb-3 pt-3 mb-3 border-bottom" th:each="reply:${comment.replyComments}">
                                <!--注意1，这里有两种情况：（1）回复当前评论，显示回复用户的id；（2）回复评论中的回复，显示xxx回复xxx-->
                                <!--所以需要加上判断条件，如果这个回复有指向性（看target是否为空，即目标用户是否为空），就显示xxx回复xxx-->
                                <div>
										<span th:if="${reply.target == null}">
											<b class="text-info" th:utext="${reply.user.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
                                    <span th:if="${reply.target != null}">
											<i class="text-info" th:utext="${reply.user.username}">Sissi</i>回复
											<b class="text-info" th:utext="${reply.target.username}">寒江雪</b>:&nbsp;&nbsp;
										</span>
                                    <span th:utext="${reply.content}">回复内容</span>
                                </div>
                                <div class="mt-3">
                                    <span th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</span>
                                    <ul class="d-inline float-right">
                                        <!--注意2，点击此回复会显示回复框，这个回复框和用户的id是匹配的，每次循环都会有这样的关系，所以需要维护它们之间的关系-->
                                        <!--实现：修改a标签的链接，对应的是下面回复框中的id-->
                                        <!--报错是idea警告问题，只要程序正常启动即可-->
                                        <li class="d-inline ml-2"><a th:href="|#huifu-${replyStat.count}|" data-toggle="collapse" class="text-primary">回复</a></li>
                                    </ul>
                                    <!--这里的id和上面回复的链接相对应，后面的变量是循环次数-->
                                    <!--问：会不会出现不同评论下的回复框id相同,  然后点下回复相同id的框全弹出来了?-->
                                    <!--答：会重复，但是效果上不影响，它会匹配最近的那个ID。-->
                                    <div th:id="|huifu-${replyStat.count}|" class="mt-4 collapse">
                                        <form method="post" th:action="@{|/discuss/comment/add/${discussPost.id}|}">
                                            <div>
                                                <input type="text" class="input-size" th:placeholder="|回复${reply.user.username}|" name="content" style="width: 90%; height: 40px;border-radius: 5px;font-size: 14px;border-color:white;"/>
                                                <input type="hidden" name="entityType" value="2">
                                                <input type="hidden" name="entityId" th:value="${comment.id}">
                                                <!--注意这里的回复还需要传targetId-->
                                                <input type="hidden" name="targetId" th:value="${reply.user.id}">
                                            </div>
                                            <div class="text-right mt-2">
                                                <button type="submit" class="btn btn-primary btn-sm" onclick="">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </li>
                            <!-- 回复输入框 -->
                            <li class="pb-3 pt-3">
                                <form method="post" th:action="@{|/discuss/comment/add/${discussPost.id}|}">
                                    <div>
                                        <input type="text" class="input-size" placeholder="请输入你的观点" name="content" style="width: 90%; height: 40px;border-radius: 5px;font-size: 14px;border-color:white;"/>
                                        <input type="hidden" name="entityType" value="2">
                                        <input type="hidden" name="entityId" th:value="${comment.id}">
                                        <input type="hidden" name="targetId" th:value="${comment.userId}">
                                    </div>
                                    <div class="text-right mt-2">
                                        <button type="submit" class="btn btn-primary btn-sm" onclick="">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
        </div>
        <!-- 回帖输入 -->
        <div class="container mt-3">
            <form class="replyform" method="post" th:action="@{|/discuss/comment/add/${discussPost.id}|}">
                <p class="mt-3">
                    <a name="replyform"></a>
                    <textarea placeholder="在这里畅所欲言你的看法吧!" name="content" style="width: 94%; margin-left: 4%; height: 100px; border-radius: 5px;"></textarea>
                    <!--除内容外，还需要传入两个隐含的条件：（1）entityType（2）entityId-->
                    <input type="hidden" name="entityType" value="1">
                    <input type="hidden" name="entityId" th:value="${discussPost.id}">
                    <input type="hidden" name="targetId" th:value="${discussPost.userId}">
                </p>
                <p class="text-right">
                    <button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
                </p>
            </form>
        </div>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>
</body>
</html>